<template>
  <!--这里是抽奖转盘组件-->
  <div class="rotary-box">
    <div class="wrap-box">
      <div class="header-tip" :class="[lotteryNumOpcityClass]">
        - 当前还剩 {{lotteryNum}} 次抽奖机会 -
      </div>
      <div class="circle-box">
        <div class="gif-twinkle-box"></div>
        <div class="lottery-footer-box"></div>
        <LuckyWheel class="canvas-lottory" ref="myLucky" width="18.125rem" height="18.125rem"
          :defaultConfig="defaultConfig" :defaultStyle="defaultStyle" :prizes="prizes" :blocks="blocks"
          @start="startCallback" @end="endCallback" />
        <div class="circle-btn" @click="startTuentable">
          立即抽
        </div>
      </div>
      <div class="rule"><span @click="clickLotteryRule">抽奖规则</span><span @click="roomMineLotteryList">我的奖品</span></div>
      <div class="tuenttable-add-chance-btn" v-if='isAddChangeBtn'>
        <img src="../../assets/images/choujiang/cj-gift.png" />
        <p @click="addChange">增加抽奖机会</p>
      </div>
      <div class="rotary-close-btn" @click="clickClose"></div>
    </div>
    <!-- 		<div class="wrap-box">
			<div class="header-tip" :class="[lotteryNumOpcityClass]">
				- 当前还剩 {{lotteryNum}} 次抽奖机会 -
			</div>
			<div class="circle-box">
				<div class="gif-twinkle-box"></div>
				<div class="lottery-footer-box">

				</div>
				<div :class="[cricleDiscNum]" ref='cricleDisc' :style="{transform:rotateAngle,transition:tranInof}">
					<ul class="gift-container">
						<li v-for="(item, index) in prizeList" :key="index" :style="{'transform': `rotate(${index * 360 / prizeList.length+rotateNum}deg)`}">

							<template v-if="item.prizeType=='0'">
								<p class="thanks-p">谢谢</p>
								<p class="thanks-p-cy">参与</p>
							</template>
							<template v-else-if="item.prizeType=='1'">
								<p>{{item.prizeNm}}</p>
							    <img  :src="item.picUrl ||defaultPngSW">
							</template>
							<template v-else-if="item.prizeType=='2'">
								<p>{{item.prizeNm}}</p>
							    <img  :src="item.picUrl ||defaultPngLQ">
							</template>
						</li>
					</ul>
				</div>
				<div class="circle-btn" @click="startTuentable">
					立即抽
				</div>
			</div>
			<div class="rule" ><span @click="clickLotteryRule">抽奖规则</span><span @click="roomMineLotteryList">我的奖品</span></div>
			<div class="tuenttable-add-chance-btn" v-if='isAddChangeBtn' >
				<img src="../../assets/images/choujiang/cj-gift.png" />
				<p @click="addChange">增加抽奖机会</p>
			</div>
			<div class="rotary-close-btn" @click="clickClose"></div>
		</div> -->
  </div>
</template>

<script>
  //import { Popup } from 'vant';
  export default {
    props: {
	  roomInfo:Object,
      lotteryInfoObj: Object, //抽奖数据
      activityId: String, //抽奖活动id
      addDrawTimes: Number, //增加的抽奖次数
      applyAddLotteryNum: Number, //报名增加的抽奖次数
    },
    data() {
      return {
        rotateAngle: '',
        tranInof: '',
        prizeList: [], //奖品信息
        prizeSwitch: true, //抽奖开关
        roomId: this.$route.params.roomid, //房间id
        lotteryInfo: {}, //中奖信息
        isAddChangeBtn: false,
        lotteryNum: this.lotteryInfoObj.userDrawTimes, //抽奖的次数
        lotteryNumOpcityClass: 'opcity-num-0',
        defaultPngSW: require("@/assets/images/choujiang/shiwu.png"),
        defaultPngLQ: require("@/assets/images/choujiang/liquan.png"),
        drawLottoResCode:'',
        //lotteryNum:110,
        defaultConfig: {
          stopRange: 0.8,
        },
        defaultStyle: {
          fontColor: '#F84F2E',
          fontSize: '0.9rem',
          fontWeight: '600',
          lineClamp:2,
        },
        blocks: [{
          padding: '20px',
          imgs: [{
            src: '',
            width: '100%',
            rotate: true
          }]
        }],
        prizes: [],
        buttons: [],
      }
    },
    components: {},
    watch: {
      addDrawTimes() { //监听抽奖的次数
        this.lotteryNum = this.lotteryNum + this.addDrawTimes;
      },
      applyAddLotteryNum() {
        this.lotteryNum = this.lotteryNum + this.applyAddLotteryNum;
        this.lotteryNumOpcityClass = 'opcity-num-1';
        this.discAnimationStart();
        this.$refs.myLucky.play();
      }
    },
    created() {
      let {
        lottoPrizeList
      } = this.lotteryInfoObj;
      //console.log(lottoPrizeList)
      if (lottoPrizeList.length == '6') {
        this.blocks[0].imgs[0].src = require("@/assets/images/choujiang/circle_bg_six.png")
      } else {
        this.blocks[0].imgs[0].src = require("@/assets/images/choujiang/circle_bg.png")
      }
      lottoPrizeList.map((item,index)=>{
        if(item.prizeType=='0'){//谢谢参与
         let obj = {
            fonts: [{
                text: '谢谢\n参与',
                top: '12%',
                wordWrap:false,
                fontSize:'1.2rem'
              }]
         }
         this.prizes.push(obj)
        }else if(item.prizeType=='1'){//实物
        let obj ={
            fonts: [{
              text: item.prizeNm,
              top: '8%'
            }],
            imgs: [{
              src: item.picUrl || require("@/assets/images/choujiang/shiwu.png"),
              width: "3.2rem",
              top: "25%"
            }]
        }
         this.prizes.push(obj)
        }else if(item.prizeType=='2'){//奖券
           let obj ={
               fonts: [{
                 text: item.prizeNm,
                 top: '8%'
               }],
               imgs: [{
                 src: item.picUrl || require("@/assets/images/choujiang/liquan.png"),
                 width: "3.2rem",
                 top: "25%"
               }]
           }
           this.prizes.push(obj)
        }
      })
      if (this.lotteryInfoObj.isAddDrawTimes == '1') { //增加抽奖机会按钮打开  0-关 ,1-开  默认为关
        this.isAddChangeBtn = true;
      }
      this.prizeList = this.lotteryInfoObj.lottoPrizeList
      if (this.lotteryInfoObj.drawRange == '1') { //报名
        this.lotteryNumOpcityClass = 'opcity-num-0'
      } else if (this.lotteryInfoObj.drawRange == '0') { //全部用户
        this.lotteryNumOpcityClass = 'opcity-num-1'
      }
    },
    methods: {
      // 抽奖结束会触发end回调
      endCallback(prize) {
        setTimeout(()=>{
          if(this.drawLottoResCode=='000000'){
              this.$emit('formChildMsg', {
                  type: 'lotteryResult',
                  data: this.lotteryInfo
              })
          }
        this.prizeSwitch = true;
        },300)
      },
      roomMineLotteryList() { //我的奖品列表
        this.$emit('formChildMsg', {
          type: 'minePrizeLiveList',
          data: 'ruan'
        })
        this.$store.dispatch("setIsGlobalMaskClick", false);
      },
      addChange() { //增加抽奖机会
        this.$emit('formChildMsg', {
          type: 'addChange',
          data: 'ruan'
        })
      },
      clickLotteryRule() { //抽奖规则
        this.$emit('formChildMsg', {
          type: 'lotteryRule',
          data: 'ruan'
        })
      },
      clickClose() {
        this.$emit('formChildMsg', {
          type: 'closeTurntable',
          data: 'ruan'
        })
      },
      discAnimationStart() {
		//console.log(this.lotteryNum)
        if (this.lotteryNum == '0') {
          fun.toastMessage('您的抽奖次数已用完');
          return
        }
        this.lotteryNum--;
        this.prizeSwitch = false;
        this.getLotteryData(); //请求中奖接口
      },
      startTuentable() { //开始抽奖 //drawSource  0 全选, 1 微信用户, 2 APP用户
        // 神策打点（抽奖参与）
        const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `直播${['预告', '详情'][roomStatus]}页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: roomId,
          live_room_name: title,
          live_room_status: ['预告', '直播中'][roomStatus],
          live_room_creator: anchor,
          function_name: '抽奖参与',
        });
	       if (this.$channel === config.MSYH && window.terminal.weixin && window.isUc != '1') { //  isUc 已经判断民生 微信    通行证
	             fun.msySkipSinePage('live', this.$route.params.roomid, this.roomInfo.source) //调用微信 民生银行通行证
	             return
	           }
	           if (window.terminal.isZxyhApp) { //zxyh 未登录 调起登录
	             window.bank.userInfoPlugin.isLogin((res) => {
	               //console.log('zxyh res.isLogin',res.isLogin)
	               if (res.isLogin) { //  true 已经登录
	               } else { //  false  未登录
	                 fun.zxyhLogin(window.location.href) //调起登录
	                 return
	               }
	             })
	           }
	           if(this.$store.state.isYk){
	              fun.ykDisposeFun();
	              return
	           }
			  //  else{
				 // if (this.lotteryNum == '0') {
				 //    fun.toastMessage('您的抽奖次数已用完');
				 //    return
				 //  }
			  //  }
	 
        if (window.terminal.weixin) { //微信
          if (this.lotteryInfoObj.drawSource == '2') {
            fun.toastMessage('仅限APP用户参加抽奖');
            return
          }
        } else {
          if (this.lotteryInfoObj.drawSource == '1') {
            fun.toastMessage('仅限微信用户参加抽奖');
            return
          }
        }
        //判断抽奖要不要报名  drawRange 抽奖范围 0 全部用户 ，1 报名用户 2 指定用户
        if (this.lotteryInfoObj.drawRange == '1') { //报名
          this.$emit('formChildMsg', {
            type: 'openApplyLottery',
            data: 'ruan'
          })
        } else if (this.lotteryInfoObj.drawRange == '0') { //全部用户
          if (this.prizeSwitch) { //可以抽奖
		     if(this.lotteryNum == '0'){
			   fun.toastMessage('您的抽奖次数已用完');
			    return
		     }else{
				 this.$refs.myLucky.play();//动画
				 this.discAnimationStart(); //开始抽奖
			 }           
          } else { //不能抽奖
            if (this.lotteryNum > 0) {
              fun.toastMessage('手速太快啦~休息一下再抽吧');
            }
          }
        }
      },
      getLotteryData() { //请求抽奖结果接口
        this.$http.get("/lotto/drawLotto?account=" + this.$store.state.userInfo.un + "&roomId=" + this.roomId +
            "&activityId=" + this.activityId).then(res => {
            if (res.data.code == "000000") {
              // 神策打点（抽奖成功）
              const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
              $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
                page_name: `直播${['预告', '详情'][roomStatus]}页`,
                user_nickname: this.$store.state.userInfo.nickname,
                live_room_id: roomId,
                live_room_name: title,
                live_room_status: ['预告', '直播中'][roomStatus],
                live_room_creator: anchor,
                function_name: '抽奖参与',
              });
              this.drawLottoResCode  = '000000';
              this.lotteryInfo = res.data.data; //中奖信息
              //console.log('拿到中奖信息',res.data.data);
              this.$refs.myLucky.stop(res.data.data.positionId-1);
            } else if (res.data.code == "100009") {
              this.drawLottoResCode  = '';
              console.log('抽奖未开始', res.data)
              setTimeout(() => {
                this.$emit('formChildMsg', {
                  type: 'openlotteryErrorTipCom',
                  data: 'ruan'
                })
                this.$refs.myLucky.init()
              }, 4000)
            } else {
              this.drawLottoResCode  = '';
              console.log('抽奖结果报错', res.data)
              setTimeout(() => {
                this.$emit('formChildMsg', {
                  type: 'openlotteryErrorTipCom',
                  data: 'ruan'
                })
                this.$refs.myLucky.init()
              }, 4000)
            }

          })
          .catch(response => {
            console.log(response);
          });
      }
    }
  }
</script>

<style scoped="scoped" lang="less">
  .rotary-box {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 1010;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .wrap-box {
      width: 100vw;
      height: 900px;
      // background: salmon;
      position: relative;
       .opcity-num-0{
       	opacity: 0;
       }
       .opcity-num-1{
       	opacity: 1;
       }
      .header-tip {
        width: 364px;
        height: 56px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50px;
        font-size: 26px;
        line-height: 56px;
        text-align: center;
        color: white;
        margin: 0 auto;
      }

      .circle-box {
        width: 580px;
        height: 580px;
        /*background: saddlebrown;*/
        margin: 10px auto;
        position: relative;
        z-index: 1002;
        font-size: 40px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;

        .canvas-lottory {
          position: relative;
          z-index: 1001;
        }

        .lottery-footer-box {
          width: 475px;
          height: 116px;
          background: url(../../assets/images/choujiang/lottery-footer.png) no-repeat;
          background-size: 475px 116px;
          position: absolute;
          left: 40px;
          bottom: -30px;
          z-index: 1000;
        }

        .gif-twinkle-box {
          width: 580px;
          height: 580px;
          background: url(../../assets/images/choujiang/lottery-gif.gif) no-repeat;
          background-size: 580px 580px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1002;
        }

        .circle-btn {
          width: 229px;
          height: 262px;
          background: url(../../assets/images/choujiang/cricle-btn.png) no-repeat;
          background-size: 229px 262px;
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 1002;
          margin-left: -114px;
          margin-top: -135px;
          font-size: 40px;
          font-weight: bold;
          color: #FEFEFE;
          text-align: center;
          line-height: 262px;
        }
      }

      .rule {
        width: 100vw;
        height: 40px;
        font-size: 26px;
        font-weight: 400;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 670px;
        left: 0;
        z-index: 1001;

        span {
          display: inline-block;
          border-bottom: 1px solid white;
          padding: 2px;
          margin: 0 17px;
        }
      }

      .rotary-close-btn {
        width: 63px;
        height: 63px;
        background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
        background-size: 63px 63px;
        /*margin: 100px auto 0;*/
        position: absolute;
        bottom: 10px;
        left: 346px;
      }

      .tuenttable-add-chance-btn {
        width: 382px;
        height: 78px;
        background: #FB1450;
        box-shadow: 0px 13px 35px 0px #FC5A84;
        border: 5px solid #FE8794;
        border-radius: 39px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        top: 725px;
        left: 186px;

        img {
          width: 41px;
          height: 40px;
          margin-right: 11px;
        }
      }
    }
  }
</style>
